<template>
	<div class="header">
		<div class="content-wrap">
			<div class="avatar">
				<img :src="seller.avatar" width="64" height="64">
			</div>
			<div class="content">
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}分钟送达
				</div>
				<div class="support" v-if="seller.supports">
					<span class="icon" :class="classMap[seller.supports[0].type]"></span>
					<span class="text">{{seller.supports[0].description}}</span>
				</div>
			</div>
			<div class="countSupport" v-if="seller.supports" @click="showDetail">
				<span class="count">{{seller.supports.length}}个</span>
				<i class="icon-keyboard_arrow_right"></i>
			</div>
		</div>
		<div class="botice-wrap" @click="showDetail">
			<span class="botice-notice"></span><span class="botice-content">{{seller.bulletin}}</span>
			<i class="icon-keyboard_arrow_right"></i>
		</div>
		<div class="background">
			<img :src="seller.avatar" width="100%" height="100%">
		</div>
		<transition name="slide-fade">
			<div class="detail" v-show="detailShow">
				<div class="detailWrap clearFix">
					<div class="detailMain">
						<h1 class="name">{{seller.name}}</h1>
						<div class="star-wrap">
							<star :size="48" :score="seller.score"></star>
						</div>
						<div class="title">
							<div class="line"></div>
							<div class="text">优惠信息</div>
							<div class="line"></div>
						</div>
						<ul class="support" v-if="seller.supports" >
							<li v-for="(item,index) in seller.supports" class="support-item">
								<span class="icon" :class="classMap[seller.supports[index].type]"></span>
								<span class="text">{{seller.supports[index].description}}</span>
							</li>
						</ul>
						<div class="title">
							<div class="line"></div>
							<div class="text">商家公告</div>
							<div class="line"></div>
						</div>
						<div class="bulletin">
							<p class="content">
								{{seller.bulletin}}
							</p>
						</div>
					</div>
				</div>
				<div class="detailClose" @click="closeDetail">
					<i class="icon-close"></i>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	import star from "@/components/star/Star"
	export default {
	  props: {
	    seller: {
	      type: Object
	    }
	  },
	  data() {
	    return {
	    	detailShow:false
	    };
	  },
	  methods:{
	  	showDetail(){
	  		this.detailShow=true
	  	},
	  	closeDetail(){
	  		this.detailShow=false
	  	}
	  },
	  created(){
	  	this.classMap=["decrease","discount","special","invoice","guarantee"]
	  },
	  components:{
	  	star
	  }
	};
</script>
<style scoped lang="stylus">
/*@import '../../../static/css/max.styl';*/
	@import '~common/stylus/max.styl';
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
	.header
		color:#fff
		position:relative
		overflow:hidden
		background:rgba(7,17,27,0.5)
		.content-wrap
			position:relative
			padding:24px 12px 18px 24px
			font-size:0
			.avatar
				display:inline-block
				vertical-align:top
				img
					border-radius:2px
			.content
				display:inline-block
				margin-left:16px
				font-size:14px
				.title
					margin:2px 0 8px 0
				 	.brand
						display:inline-block
						vertical-align:top
						width:30px
						height:18px
						bg-image('brand')
						background-size:30px 18px
						background-repeat:no-repeat
					.name
						margin-left:6px
						font-size:16px
						font-weight:bold
						line-height:18px
				.description 
					font-size:12px
					line-height:12px
					font-weight:200
					margin-bottom:10px
				.support
					font-size:12px
					line-height:12px
					font-weight:200
					.icon
						display:inline-block
						vertical-align:top
						width:12px
						height:12px
						background-size:12px 12px
						background-repeat:no-repeat
						&.decrease
							bg-image('decrease_1')
						&.discount
							bg-image('discount_1')
						&.special
							bg-image('special_1')
						&.invoice
							bg-image('invoice_1')
						&.guarantee
							bg-image('guarantee_1')
					.text
						font-size:10px
						line-height:12px	
			.countSupport
				position:absolute
				right: 12px
				bottom: 18px
				padding:0 8px
				height:24px
				line-height: 24px
				border-radius:14px
				background-color:rgba(0,0,0,0.2)
				text-align:center
				font-size: 12px
				.count
					font-size:10px
				.icon-keyboard_arrow_right
					margin-left:2px
					font-size:10px
		.botice-wrap
			position:relative
			height:28px
			line-height:28px
			background-color:rgba(7,17,27,0.2)
			padding:0 22px 0 12px
			overflow:hidden
			white-space:nowrap
			text-overflow:ellipsis
			.botice-notice
				display:inline-block
				vertical-align:top
				margin-top:8px
				width:22px
				height:12px
				bg-image('bulletin')
				background-size:22px 12px
				background-repeat:no-repeat
			.botice-content
				vertical-align:top
				margin:0 4px
				font-size:10px
			.icon-keyboard_arrow_right
				position:absolute
				font-size:10px
				right:12px
				bottom:8px
		.background
			position:absolute
			top:0
			left:0
			width:100%
			height:100%
			z-index:-1
			filter:blur(10px)
		.detail
			position:fixed
			top:0
			left:0
			width:100%
			height:100%
			overflow:auto
			z-index:100
			background-color:rgba(7,17,27,0.8)
			
			.detailWrap
				min-height:100%
				width:100%
				height:auto
				.detailMain
					padding-bottom:64px
					margin-top:64px
					.name
						font-size:16px
						font-weight:700
						line-height:16px
						color:#fff
						text-align:center
					.star-wrap
						margin-top:16px
						padding:2px 0
						text-align:center
			.title
				display:flex
				margin:28px auto 24px auto
				width:80%
				.line
					flex:1
					position:relative
					top:-6px
					border-bottom:1px solid rgba(255,255,255,0.2)
				.text
					font-size:14px
					padding:0 12px
					font-weight:700
			.support
				width:80%
				margin:0 auto 
				.support-item
					padding:0 12px
					margin-bottom:12px 
					font-size:0
					&:last-child
						margin-bottom:0
					.icon
						display:inline-block
						vertical-align:top
						width:16px
						height:16px
						background-size:16px 16px
						background-repeat:no-repeat
						&.decrease
							bg-image('decrease_2')
						&.discount
							bg-image('discount_2')
						&.special
							bg-image('special_2')
						&.invoice
							bg-image('invoice_2')
						&.guarantee
							bg-image('guarantee_2')
					.text
						font-size:16px
						line-height:16px
						font-weight:200	
						margin-left:6px
			.bulletin
				width:80%
				margin:0 auto
				.content
					padding:0 12px
					font-size:12px
					line-height:24px
			.detailClose
				position:relative
				width:32px
				height:32px
				margin:-64px auto 0 auto
				font-size:32px
				color:rgba(255,255,255,0.5)
				clear:both

				
				    	
</style>
